<template>
    <header class="fixed top-2 sm:top-4 mx-auto left-1/2 transform -translate-x-1/2 z-10">
        <nav class="relative flex gap-1.5 [&>div]:min-w-0 items-center justify-between bg-background/70 text-muted-foreground backdrop-blur-sm rounded-full p-2 sm:px-4 border border-border border-muted/50 shadow-lg shadow-neutral-950/5">
            <ul class="flex item-center justify-between space-x-2">
                <li><NuxtLink to="/" class="block p-1 hover:bg-muted rounded-sm">Home</NuxtLink></li>
                <li><NuxtLink to="/abouts" class="block p-1 hover:bg-muted rounded-sm">Abouts</NuxtLink></li>
            </ul>
            <ThemeToggle></ThemeToggle>
        </nav>
        
    </header>
</template>

<script setup>
import ThemeToggle from '~/components/ThemeToggle/index.vue'

</script>